<template>
    <view>
        {{type}}
        <view class="item" v-for="i in data" v-if="type!='pdf'">
            <span class="flex-item" :class="type=='people' ? 'item1' : 'item2'">{{i.name}}</span>
            <span class="flex-item " :class="type=='people' ? 'item2' : 'item1'">
                <image src="../../static/site-icon.png" class="u-guest" v-if="type=='institution'" />
                {{i.job}}</span>
        </view>


        <view class="item item1" v-if="type=='pdf'" v-for="i in data">
            <view @click='downloadFile(i.url)'>
                <view class="fileName">{{i.name}}</view>
                <view>
                    <image src="../../static/downlaod.png" class="u-downicon" /> <text> 下载文档</text>
                </view>
            </view>

        </view>
        <image src="../../static/goback.png" class="u-fixed" @click="navigatorTo()" />
    </view>
</template>
<script lang="ts">
    import Vue from "vue";
    import { peopleArr, institutionArr, pdfArr } from "@/assets/js/data.js"
    export default Vue.extend({
        data() {
            return {
                data: [],
                type: null
            };
        },
        onShow() {

        },

        onLoad: function (options) {
            this.type = options.type
            if (options.type == "people") {
                this.data = peopleArr
            } else if (options.type == "institution") {
                this.data = institutionArr
            } else {
                this.data = pdfArr
            }
            console.log(options)
        },

        mounted() {



        },
        methods: {
            downloadFile(url) {
                let that=this;
                uni.downloadFile({
                    url: url,
                    success: function (res) {
                        var filePath = res.tempFilePath
                        uni.openDocument({
                            filePath: filePath,
                            success: function (res) {
                                console.log('打开文档成功')
                            }
                        })
                    }
                })
            },
            download(url) {
                console.log(url)
                location.href = url
            },

            navigatorTo() {
                uni.switchTab({
                    url: '/pages/index/index'
                })
            }
        },

    });
</script>
<style lang="scss">
    .u-fixed {
        width: 110upx;
        height: 110upx;
        position: fixed;
        right: 30upx;
        bottom: 300upx;
    }

    .item1 .u-downicon {
        width: 30upx;
        height: 38upx;
        margin-top: 20upx;
        margin-right: 20upx;
        vertical-align: bottom;
        display: inline-block;
    }

    .item1 abbr {
        font-size: 20upx;
        display: inline-block;
        margin-left: 20upx;
        position: relative;
        top: -15upx
    }

    .item {
        color: #fff;
        width: 100%;
        min-height: 114upx;
        line-height: 40upx;
        box-sizing: border-box;
        background: url("../../static/projectBg2.jpg");
        background-size: 100% 100%;
        border-radius: 15upx;
        display: -webkit-flex;
        display: flex;
        font-size: 30upx;
        padding: 30upx 20upx;
        margin: 20upx 0;

        .u-guest {
            height: 30upx;
            width: 25upx;
            margin-right: 20upx;
            vertical-align: middle;
        }

        .item1 {
            -webkit-flex: 1;
            flex: 1;
            padding-left: 30upx;
        }

        .item2 {
            -webkit-flex: 3;
            flex: 3;
            padding-left: 30upx;
        }
    }
</style>